<template>
  <div id="user_parking">
    <el-main>
      <el-table :data="parking">
        <el-table-column prop="parkingSpaceNumber" label="停车位" width="100"></el-table-column>
        <el-table-column prop="address" label="区域" width="100"></el-table-column>
        <el-table-column prop="price" width="300" label="每小时价格">
          <template slot-scope="{row: {price}}">
            <span>{{ price }}元</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="150">
          <template slot-scope="{row: {state}}">
            <span v-if="+state === 0">空闲</span>
            <span v-else-if="+state === 1">占用</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="操作" width="200">
          <template slot-scope="scope">
            <span v-if="+scope.row.state === 0">
               <el-popconfirm
                   confirm-button-text='好的'
                   cancel-button-text='不用了'
                   icon="el-icon-info"
                   icon-color="red"
                   title="确定要选择这个停车位吗？"
                   @confirm="choiceParking(scope.row.id,scope.row.address)">
                   <el-button slot="reference">选择此停车位</el-button>
</el-popconfirm>
            </span>
            <span v-else-if="+scope.row.state === 1">该停车位已被占用</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>

<script>
export default {
  name: "user_parking",
  data() {
    return {
      parkingSpaceNumber: '',
    }
  },
  props: {
    parking: {
      type: Array,
      default: () => []
    },
    email: null,
  },
  methods: {
    //传递id给后端
    choiceParking(id, address) {
      this.$http.get("http://localhost:8088/user/findNoCompleteOrder", {
        params: {
          email: this.email,
        }
      }).then(resp => {
        if (resp.data != '') {
          console.log(resp.data)
          alert("您还有订单未出库支付，请先完成订单！")
        } else {
          this.$http.get("http://localhost:8088/user/addOrder", {
            params: {
              id: id,
              email: this.email,
            }
          }).then(resp => {
            console.log(resp.data);
            this.$http.get("http://localhost:8088/user/findParkingByAddress", {
              params: {
                address: address,
              }
            }).then(resp => {
              this.parking = resp.data
              this.$router.push({
                name: 'user_parking',
                query: {
                  parking: this.parking,
                  email: this.email,
                }
              }).catch(err => {
                console.log(err)
              })
            }).catch({})
          }).catch({})
        }
      })

    }
  },
}
</script>

<style scoped>
#user_parking {
  width: 100%;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

el-header {
  width: 100%;
}

.el-aside {
  color: #333;
}
</style>